<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="font_c2am3mt5e6e/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="CSS/search.css"/>
    <style>
        input{
            width: 300px;
            height: 40px;
        }
        .layui-table-cell{
            height:auto;
            max-width: 100%;
            overflow: visible;
            text-align: center;
            white-space: normal;
        }
    </style>
</head>
<body>
<body>
<table class="layui-hide" id="test"></table>
<script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<script>
    var btn=document.querySelector('.btn')
    var input=document.querySelector('input')
    layui.use('table', function(){
        var table = layui.table
        table.render({
            elem: '#test'
            ,url: 'http://8.130.14.155:8080/user/books'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                {field:'id', width:80, title: 'ID', sort: true}
                ,{field:'title', width:120, title: '书名'}
                ,{field:'cover', width:120, title: '图片',templet:'<div><img src="{{d.cover}}" alt=""></div>'}
                ,{field:'author', width:120, title: '作者名'}
                ,{field:'date', width:120, title: '出版日期'}
                ,{field:'press', title: '出版社', width: 120, minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                ,{field:'abs', title: '简介'}
            ]]
            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "msg": "", //解析提示文本
                    "count": 100, //解析数据长度
                    "data": res.data //解析数据列表
                };

            }
        })
    })
</script>
</body>
</body>
</html>


